<template>
  <view id="inviteCodeRef" class="invite-code">
    <mt-navbar title="我的邀请码" bg-color="rgba(0,0,0,0)" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }"></mt-navbar>
    <view class="container">
      <view class="container-top">
        <view class="avatar">
          <image
            class="w-128rpx h-128rpx"
            style="border-radius: 50%"
            :src="
              userInfo.avatarUrl ? userInfo.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'
            "
          ></image>
        </view>
        <text class="name-box mt-16rpx text-#727687 text-24rpx clamp2">{{ userInfo.providerName }}邀请您注册易盟</text>
        <view class="qr-code">
          <uv-qrcode ref="qrcodeRef" class="qr-code-canvas" size="400rpx" :value="inviteUrl" @complete="handleComplete"></uv-qrcode>
          <image :src="qrcodeBase64" class="w-400rpx h-400rpx"></image>
        </view>
        <text class="px-80rpx text-#1A1A1A text-28rpx text-center mb-40rpx line-height-normal font-normal"
          >扫描二维码快速注册易盟，开始发布线索，进行返佣提现吧！</text
        >
      </view>
    </view>
    <view class="container-save safety-48"><mt-button class="save-btn" @click="handleSaveQrCode">保存到相册</mt-button></view>
  </view>
</template>

<script name="inviteCode" setup>
import userStore from '@/store/user';
import { onLoad, onReady } from '@dcloudio/uni-app';

const user = userStore();
const { userInfo } = user;

const qrcodeRef = ref(null);
const inviteUrl = ref('');

// 将canvas转换为base64
let qrcodeBase64 = ref('');

// 保存二维码方式
const handleSaveQrCode = () => {
  qrcodeRef.value.save({
    success: (res) => {
      uni.showToast({
        title: '保存成功',
        icon: 'none'
      });
    }
  });
};

// 截屏保存方式
const handleSaveAlbum = () => {
  // #ifdef H5
  qrcodeRef.value.save();
  // #endif
  appScreenshot();
};

const handleComplete = (res) => {
  if (res.success) {
    getInviteCode();
  }
};

// 获取邀请二维码
const getInviteCode = () => {
  qrcodeRef.value.toTempFilePath({
    success: (res) => {
      qrcodeBase64.value = res.tempFilePath;
    }
  });
};

// app 截图方法
const appScreenshot = () => {
  try {
    let pages = getCurrentPages(); //获取当前页面信息
    let page = pages[pages.length - 1];
    let bitmap = null;
    let currentWebview = page.$getAppWebview();
    bitmap = new plus.nativeObj.Bitmap('amway_img');
    // 将webview内容绘制到Bitmap对象中
    currentWebview.draw(
      bitmap,
      function () {
        //这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题
        let rand = Math.floor(Math.random() * 10000);
        let saveUrl = '_doc/' + rand + 'inviteCode.jpg';
        bitmap.save(
          saveUrl,
          {},
          function (i) {
            uni.saveImageToPhotosAlbum({
              filePath: i.target,
              success: function () {
                // bitmap.clear(); //销毁Bitmap图片
                uni.showToast({
                  title: '保存图片成功',
                  mask: false,
                  duration: 1500
                });
              }
            });
          },
          function (e) {}
        );
      },
      function (e) {},
      {
        check: true, // 设置为检测白屏
        clip: { top: '90', left: '0px', height: '91%', width: '100%' } // 设置截屏区域
      }
    );
  } catch (e) {}
};

onReady(() => {
  getInviteCode();
});

onLoad((data) => {
  inviteUrl.value = `${import.meta.env.VITE_APP_INVITE_URL}?inviteCode=${data.inviteCode}&type=2`;
});
</script>

<style lang="scss" scoped>
.invite-code {
  min-height: 100vh;
  background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-invite-bg.png') no-repeat;
  background-size: cover;
  padding: 90rpx 32rpx 150rpx;
  box-sizing: border-box;
  .container {
    box-sizing: border-box;
    &-top {
      height: 990rpx;
      border-radius: 16rpx 16rpx 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/invite-card.png') no-repeat;
      background-size: 100% 100%;
    }

    &-footer {
      background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-invite-bg2.png') no-repeat;
      background-size: cover;
      height: 520rpx;
      border-radius: 0 16rpx 16rpx 16rpx;
      margin-top: -262rpx;
      position: relative;
      .footer-img {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #e9f4ff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 0 0 16rpx 16rpx;
        .item {
          .circle {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            background-color: #b8daf9;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    &-save {
      position: fixed;
      bottom: 48rpx;
      left: 0;
      right: 0;
      padding: 0 32rpx;
      .save-btn {
        width: 100%;
        border-radius: 4px;
        background: linear-gradient(130deg, #1484ee 0%, #0d78dd 100%);
      }
    }

    .avatar {
      width: 128rpx;
      height: 128rpx;
      border: 4px solid #fff;
      border-radius: 50%;
      margin-top: -55rpx;
    }

    .name-box {
      max-width: 400rpx;
      text-align: center;
    }

    .qr-code {
      width: 400rpx;
      height: 400rpx;
      margin: 48rpx 0;
      z-index: 9;
      &-canvas {
        position: absolute;
        top: -9999;
        left: -9999;
      }
    }
  }
}
</style>
